<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/pageswitch/pageSwitch.js" ></script>
<style type="text/css">
h6{font-size: 13px; color: red; float: left; line-height: 13px;}
</style>

<div id="pageTab"> 

 <div title='API'>
         <div>
		  <h2>Ccay.Common.openPage = function(title, url, options, fnCallback){}</h2>				
		  <h3>作用：根据参数生成打开页面窗口</h3>				
		  <form id="param" class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>						
				    <li class="ccay-form-row">
				        <samp><h3>参数</h3></samp>
						<span class="ccay-form-input">
							<h3>描述</h3>
						</span>
					</li>
					
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="title"></samp>
					    <span class="ccay-form-input">
							{String类型}<p>标题</span></li>
							
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="url"></samp>							    
						<span class="ccay-form-input">
							{String类型}<p>路径或路径key值</span></li>	
					
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="options"></samp>
					    <span class="ccay-form-input">
					    	<p>打开页面窗口配置
							<p>两种打开页面窗口配置如下
						     <div class="ccay-form-body">
	                           	<ul></ul>
	                       	 </div>
							 <div class="ccay-form-custom">
							 	<ul>
	                            	<li class="ccay-form-row">
	                            		<samp><h3>打开页面窗口方式</h3></samp>
	                            		<span class="ccay-form-input"><h3>参数描述</h3></span>
	                            	</li>
	                            	<li class="ccay-form-row">
										<samp class="i18n" i18nKey="Tab方式"></samp>
										<span class="ccay-form-input">
											<p>tab:{String类型} tabId<br><h6>例如：{tab:'#pageTab'}</h6><br>
											<p>permitsMany:{boolean} 是否打开多个TAB， 默认为false<br><h6>例如：{tab:'#pageTab', permitsMany:true}</h6>											
										</span>
									</li>
									<li class="ccay-form-row">
										<samp class="i18n" i18nKey="弹出框方式"></samp>
										<span class="ccay-form-input">
											<p>width:{Number} dialog显示宽度， 默认为 550
											<p>height:{Number} diaolog显示高度，默认为400
											<p>modal:{boolean} 是否为模式窗口， 默认为true
											<p>fnLoad:装载完成执行的回调函数名，注意不要在后面加括号
											<p>fnBeforeClose:关闭前执行的函数名，返回false可以阻止关闭，其他值不会
											<p>load:{boolean} 页面载入方式 默认为true，填写false为    iframe 方式载入
											<p>buttons:{Object} 按钮设置
											<p>reSizable:{boolean} 是否设置为可拖拽改变大小，默认为false关闭										
										</span>
									</li>
								</ul>							
							</div>					    
						</span>
					</li>
					    
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="fnCallback"></samp>
					    <span class="ccay-form-input">
							打开后的回调函数</span></li>
				    </ul>
			   </div>
		    </form>
			</div>			    
    </div>

 	<div title="TAB方式打开(一个)"  tabid='tab1'>
 		
 		<div style="margin-bottom: 5px;">
 			<ul>
    			<li class="ccay-form-input">
			   		<input type="text" id="mname" name="mname"/>
			   		<span class="ccay-button" onclick="Ccay.demo.pageswitch.PageSwitch.openOfTab('#mname')">
	 					<a class="ccay-icon confirm"></a>
	 					<label class="i18n" i18nKey="确定"></label>
	 				</span>
    			</li>
    		</ul>
 		</div>
 		
<!-- 代码 -->
<h3>html Code</h3>
<div class='codeArea'>
<pre id='html1'>
&lt;div id="pageTab"> 
   &lt;div title="TAB方式打开"  tabid='tab1'>
      &lt;div style="margin-bottom: 5px;">
         &lt;ul>
            &lt;li  class="ccay-form-input">
              &lt;input type="text" id="mname1" name="mname1"/>
              &lt;span class="ccay-button" onclick="Ccay.demo.pageswitch.PageSwitch1.openOfTab('#mname1')">
                 &lt;a class="ccay-icon confirm">&lt;/a>
                 &lt;label class="i18n" i18nKey="确定">&lt;/label>
              &lt;/span>
            &lt;/li>
         &lt;/ul>
      &lt;/div>
   &lt;/div>
&lt;/div>
</pre>
</div>

<h3>js Code</h3>
<div class='codeArea'>
<pre id='js1'>
Ccay.Module.define("Ccay.demo.pageswitch.PageSwitch1",function(page,$S){
	
   page.ready = function(){
	  //tab初始化
	  $S("#pageTab").ccayTab();
	  //页面注册
	  Ccay.Page.register("Ccay.demo.pageswitch.SwitchView","ccay/demo/pageswitch/switchView.html");
   }
   //以tab 方式打开
   page.openOfTab = function(mname1){
      Ccay.Common.openPage("TAB方式","Ccay.demo.pageswitch.SwitchView",{tab:'#pageTab'}
         ,function(){
            Ccay.demo.pageswitch.SwitchView.init($S(mname1).val());
      });
   }
})
</pre>
</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#pageTab',$('#js1').html(),$('#html1').html())">亲自试一试</a>
		</div>
  	</div>
 
 <!--  --><!--  -->
 
 	<div title="TAB方式打开(多个)"  tabid='tab3'>
 		permitsMany:true
 		<div style="margin-bottom: 5px;">
 			<ul>
    			<li class="ccay-form-input">
			   		<input type="text" id="mname2" name="mname2"/>
			   		<span class="ccay-button" onclick="Ccay.demo.pageswitch.PageSwitch.openOfTab('#mname2',true)">
	 					<a class="ccay-icon confirm"></a>
	 					<label class="i18n" i18nKey="确定"></label>
	 				</span>
    			</li>
    		</ul>
 		</div>
 		
<!-- 代码 -->
<h3>html Code</h3>
<div class='codeArea'>
<pre id='html12'>
&lt;div id="pageTab"> 
   &lt;div title="TAB方式打开(多个)"  tabid='tab3'>
      &lt;div style="margin-bottom: 5px;">
         &lt;ul>
            &lt;li  class="ccay-form-input">
              &lt;input type="text" id="mname3" name="mname3"/>
              &lt;span class="ccay-button" onclick="Ccay.demo.pageswitch.PageSwitch1.openOfTab('#mname3',true)">
                 &lt;a class="ccay-icon confirm">&lt;/a>
                 &lt;label class="i18n" i18nKey="确定">&lt;/label>
              &lt;/span>
            &lt;/li>
         &lt;/ul>
      &lt;/div>
   &lt;/div>
&lt;/div>
</pre>
</div>

<h3>js Code</h3>
<div class='codeArea'>
<pre id='js12'>
Ccay.Module.define("Ccay.demo.pageswitch.PageSwitch1",function(page,$S){
	
   page.ready = function(){
	  //tab初始化
	  $S("#pageTab").ccayTab();
	  //页面注册
	  Ccay.Page.register("Ccay.demo.pageswitch.SwitchView","ccay/demo/pageswitch/switchView.html");
   }
   //以tab 方式打开
   page.openOfTab = function(mname3){
      Ccay.Common.openPage("TAB方式","Ccay.demo.pageswitch.SwitchView",{tab:'#pageTab',permitsMany:true}
         ,function(){
            Ccay.demo.pageswitch.SwitchView.init($S(mname3).val());
      });
   }
})
</pre>
</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#pageTab',$('#js12').html(),$('#html12').html())">亲自试一试</a>
		</div>
  	</div>
 <!--  --><!--  -->
  	<div title="弹出框方式打开"  tabid='tab2'>
 		
 		<div style="margin-bottom: 5px;">
 			<ul>
    			<li class="ccay-form-input">
			   		<input type="text" id="mname2" name="mname2"/>
			   		<span class="ccay-button" onclick="Ccay.demo.pageswitch.PageSwitch.openOfPopup('#mname2')">
	 					<a class="ccay-icon confirm"></a>
	 					<label class="i18n" i18nKey="确定"></label>
	 				</span>
    			</li>
    		</ul>
 		</div>
 		
<!-- 代码 -->
<h3>html Code</h3>
<div class='codeArea'>
<pre id='html2'>
&lt;div id="pageTab"> 
   &lt;div title="弹出框方式打开"  tabid='tab2'>
      &lt;div style="margin-bottom: 5px;">
        &lt;ul>
          &lt;li  class="ccay-form-input">
            &lt;input type="text" id="mname3" name="mname3"/>
            &lt;span class="ccay-button" onclick="Ccay.demo.pageswitch.PageSwitch1.openOfPopup('#mname3')">
               &lt;a class="ccay-icon confirm">&lt;/a>
               &lt;label class="i18n" i18nKey="确定">&lt;/label>
            &lt;/span>
          &lt;/li>
        &lt;/ul>
      &lt;/div>
   &lt;/div>
&lt;/div>
</pre>
</div>
<h3>js Code</h3>
<div class='codeArea'>
<pre id='js2'>
Ccay.Module.define("Ccay.demo.pageswitch.PageSwitch1",function(page,$S){
	
   page.ready = function(){
	  //tab初始化
	  $S("#pageTab").ccayTab();
	  //页面注册
	  Ccay.Page.register("Ccay.demo.pageswitch.SwitchView","ccay/demo/pageswitch/switchView.html");
   }
   //以弹出框方式打开
   page.openOfPopup = function(mname){
      Ccay.Common.openPage("弹出框方式","Ccay.demo.pageswitch.SwitchView",
         {
            height:410,
            width:680,
            buttons:[{
               text:"ccay.common.button.cancel",
               type:"imgBtn",
               icon:"cancel",
               cls:"ccay-icon",
               onClick:function(){
                  Ccay.demo.pageswitch.SwitchView.closeDialog();
               }
            }]
         },function(){
            Ccay.demo.pageswitch.SwitchView.init($S(mname).val(),1);
         }
      );
   }
})
</pre>
</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#pageTab',$('#js2').html(),$('#html2').html())">亲自试一试</a>
		</div>
  	</div>
  	
  	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:150px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:150px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
			     <div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
     
</div>